<template>
  <div v-if="visible" class="set-box">
    <h3 class="set-title">秒杀</h3>
    <el-form :model="secKillForm" ref="secKillForm" label-width="76px">
      <div class="set-part mt20">
        <div class="class_box">
          <el-form-item label="列表样式" prop="listStyle">
            <div class="val-show">{{secKillForm.style.listStyle | filterRadio(listStyleOption)}}</div>
          </el-form-item>
          <div class="brother_row" style="margin-top: -10px;margin-bottom: 20px;">
            <en-radio-tab :optionsData="listStyleOption" :defaultData="secKillForm.style.listStyle"
              v-model="secKillForm.style.listStyle">
            </en-radio-tab>
          </div>
        </div>
        <!-- 商品样式开始 -->
        <el-form-item label="页面边距" prop="page_padding">
          <div class="flex">
            <el-slider class="row-slider" :min="0" :max="30" v-model.number="secKillForm.style.page_padding"></el-slider>
            <el-input class="row-input" v-model.number="secKillForm.style.page_padding"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="商品间距" prop="goods_padding">
          <div class="flex">
            <el-slider class="row-slider" :min="0" :max="30" v-model.number="secKillForm.style.goods_padding">
            </el-slider>
            <el-input class="row-input" v-model.number="secKillForm.style.goods_padding"></el-input>
          </div>
        </el-form-item>
        <!-- 商品样式结束 -->

        <!-- 商品展示配置开始 -->
        <el-form-item label="商品名称" prop="goods_name">
          <div class="flex">
            <div class="val-show flex-1">{{secKillForm.style.goods_name?'显示':'不显示'}}</div>
            <el-checkbox v-model="secKillForm.style.goods_name"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="秒杀进度" prop="seckill_progress">
          <div class="flex">
            <div class="val-show flex-1">{{secKillForm.style.seckill_progress?'显示':'不显示'}}</div>
            <el-checkbox v-model="secKillForm.style.seckill_progress"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="已抢N份" prop="goods_robbed">
          <div class="flex">
            <div class="val-show flex-1">{{secKillForm.style.goods_robbed?'显示':'不显示'}}</div>
            <el-checkbox v-model="secKillForm.style.goods_robbed"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="限购N份" prop="goods_limit">
          <div class="flex">
            <div class="val-show flex-1">{{secKillForm.style.goods_limit?'显示':'不显示'}}</div>
            <el-checkbox v-model="secKillForm.style.goods_limit"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="商品价格" prop="goods_price">
          <div class="flex">
            <div class="val-show flex-1">{{secKillForm.style.goods_price?'显示':'不显示'}}</div>
            <el-checkbox v-model="secKillForm.style.goods_price"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="划线价格" prop="old_price">
          <div class="flex">
            <div class="val-show flex-1">{{secKillForm.style.old_price?'显示':'不显示'}}</div>
            <el-checkbox v-model="secKillForm.style.old_price"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="立即抢" prop="immediately_rob">
          <div class="flex">
            <div class="val-show flex-1">{{secKillForm.style.immediately_rob?'显示':'不显示'}}</div>
            <el-checkbox v-model="secKillForm.style.immediately_rob"></el-checkbox>
          </div>
        </el-form-item>
        <!-- 商品展示配置结束 -->
      </div>
    </el-form>
    <el-button type="primary" @click="handleConfirm">数据提交</el-button>
  </div>
</template>

<script>
  import mixin from '../../mixin'
  let defaultForm = {
    style: {
      listStyle: 'row_multiple',
      // 页面外边距
      page_padding: 10,
      // 商品间距
      goods_padding: 0,
      // 商品名称
      goods_name: true,
      // 秒杀进度
      seckill_progress: true,
      // 已抢N份
      goods_robbed: true,
      // 限购N份
      goods_limit: true,
      // 商品价格
      goods_price: true,
      // 划线价格
      old_price: true,
      // 立即抢
      immediately_rob: true
    }
  }
  export default {
    name: 'EnSeckillPicker',
    mixins: [mixin],
    props: {
      show: {
        type: Boolean,
        default: false
      }, // 默认数据
      defaultData: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        visible: this.show,
        dialogSeckill: false,
        seckillData: undefined,
        secKillForm: JSON.parse(JSON.stringify(defaultForm)),
        listStyleOption: [{
          value: 'row_multiple',
          label: '样式一',
          icon: 'fonticon-good-style3'
        }, {
          value: 'row_list',
          label: '样式二',
          icon: 'fonticon-good-style4'
        }],
      }
    },
    watch: {
      show(newVal) {
        this.visible = newVal
      },
      defaultData(newVal) {
        if (!newVal) {
          return;
        };
        this.secKillForm = JSON.parse(JSON.stringify(defaultForm));
        let {
          style
        } = JSON.parse(JSON.stringify(newVal));
        this.$nextTick(() => {
          if (style) {
            this.secKillForm.style = style;
          }
        });
      }
    },
    methods: {
      /**
       * 提交
       */
      handleConfirm() {
        this.$refs['secKillForm'].validate((valid) => {
          if (valid) {
            console.log(this.secKillForm)
            this.$emit('confirm', this.secKillForm);
          } else {
            this.$message.error('表单填写有误，请核对！')
            return false
          }
        })
      }
    }
  }

</script>
